<template>
  <HeaderNav active-index="6"></HeaderNav>
  <TaskContainer>
    <div class="toolbar">
      <el-button type="primary" @click="addStage">添加阶段
        <template #icon>
          <el-icon>
            <CirclePlus/>
          </el-icon>
        </template>
      </el-button>
      <el-button type="danger" @click="batchRemove">批量删除
        <template #icon>
          <el-icon>
            <Delete/>
          </el-icon>
        </template>
      </el-button>
    </div>
    <el-table :data="list" style="width: 100%" border ref="stageTable">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="序号"/>
      <el-table-column prop="name" label="阶段名"/>
      <el-table-column label="录入时间">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon>
              <timer/>
            </el-icon>
            <span style="margin-left: 10px">{{ scope.row.create_time.substring(0, 10) }}</span>
<!--            {{ scope.row.start_time}}-->
          </div>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" prop="update_time"/>
      <el-table-column fixed="right" label="操作" width="140">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加分页插件 -->
    <div style="margin: 20px 0;">
      <el-pagination background layout="prev, pager, next"
                     hide-on-single-page
                     :page-size="pagination.rows"
                     :pager-count="11"
                     v-model:current-page="pagination.page"
                     :total="pagination.total"
                     @current-change="getStageList"/>
					  <!--分页的时候在查一次数据-->
    </div>
  </TaskContainer>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Condition from "@/components/Condition.vue"

export default {
  components: {
    HeaderNav,
    TaskContainer,
    Condition,
  },
  data() {
    return {
      pagination: {
        page: 1,
        rows: 10,
        total: 0,
      },
      list: []
    }
  },
  created() {
    window.$bus.on('close-win-refresh', (index) => {
      layer.close(index);
      this.getStageList(); //刷新
    });
    this.getStageList();
  },
  methods: {
    getStageList() {
      this.$api.getStageList(this.pagination).then(ret => {
        this.list = ret.results;
        this.pagination.total = ret.count;
      })
    },
    addStage(event) {
      // 添加阶段
      this.$layer.open({
        type: 2,
        title: '添加阶段',
        shadeClose: true,
        shade: 0.5,
        area: ['460px', '200px'],
        btn: ['保存', '关闭'],
        content: '/stage/add',
        yes: (index, layero) => {
          let iframeWin = window[layero.find('iframe')[0]['name']];
          iframeWin.$bus.emit('add-stage', index);
        }
      })
    },
    handleEdit(i, row){
		//编辑阶段
		this.$layer.open({
		  type: 2,
		  title: '编辑阶段',
		  shadeClose: true,
		  shade: 0.5,
		  area: ['650px', '360px'],
		  btn: ['保存', '关闭'],
		  content: '/stage/update?id='+row.id,
		  yes: (index, layero) => {
		    // 获取 打开的 弹出层 窗口对象
		    let iframeWin = window[layero.find('iframe')[0]['name']];
		    // 向 mitt 消息总线 发送 update-stage 事件, 并传入 index 索引
		    // 在 弹出的 stage/update 页面中 监听 update-stage、并完成 阶段的修改功能
		    iframeWin.$bus.emit('update-stage', index);
		  }
		})
	},
    handleDelete(i,row){
		//删除班级
		let id =row.id
		this.$api.deleteStage(id).then(ret=>{
			console.log(ret)
			this.getStageList()
			this.$layer.msg(ret.message)
		})
	},
    batchRemove(event) {
      // 批量删除阶段
      let rows = this.$refs.stageTable.getSelectionRows();
      let ids = rows.map(obj => obj.id);

      if (ids.length === 0) {
        this.$layer.msg('请选中至少一个要删除的阶段');
        return ;
      }
      this.$layer.confirm('您确定要批量删除选中的所有阶段吗？', {icon: 3, title: '提示'}, index => {
        this.$api.batchRemoveStage(ids).then(ret => {
            this.getStageList();
            layer.close(index);
        })
      });
    }
  }
}
</script>

<style scoped>
.table-modules {
  padding: 10px 20px;
}

.table-modules span {
  padding: 2px 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.toolbar {
  position: relative;
  right: 10px;
  z-index: 200;
  text-align: right;
  margin: 20px;
  flex: 1 1 auto;
}
</style>